<template>
    <div id="login">
        <el-dialog
            :visible="true"
            width="400px"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            custom-class="customClass"
            class="customClass"
        >
            <div slot="title">
                <div class="img">
                    <img src="../assets/Logintitle.png" alt="">
                </div>
                <div>校园内部平台</div>
            </div>
            <div class="conten">
                <el-form>
                    <el-form-item class="marginBottom">
                        <el-input clearable placeholder="请输入手机号" v-model="user.phone"></el-input>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-input placeholder="请输入密码" clearable v-model="user.passWord" show-password></el-input>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-button style="width: 100%" @click="login" type="primary">登陆</el-button>
                        <el-link style="width: 100%" @click="go" type="primary">没有账号？立即注册</el-link>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                user : {
                    phone : '17728399394',
                    passWord : 'yida5610'
                }
            }
        },
        methods : {
            go(){
                this.$router.push('/regist')
            },
            login(){
                this.$api.user.userLogin(this.user.phone,this.user.passWord)
                    .then(response => {
                        if (response.data.length == 0) throw Error("手机号或者密码错误!");
                        if (response.data.length == 1){
                            localStorage.setItem('borrowToken',true);
                            this.$router.push({
                                name : 'Home',
                                params : {
                                    data : response.data[0]
                                }
                            });
                        }else{
                            // 由于是模拟数据、返回的是数组，但是我们判断的只是手机号和密码，所以如果是相同手机号和密码，所以会十分尴尬..
                            this.$message.error("数据冲突，待处理情况");
                        }
                    })
                    .catch(error => {
                        this.$message.error(error.message);
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .customClass{
        background: url("../assets/login_bg.jpg") no-repeat;
        background-size: cover;
    }
    .img{
        width: 50px;height: 50px;
        margin: 30px auto 20px auto;

        img{
            width: 100%;
        }
    }
    .conten{
        width: 90%;
        margin: 30px auto 20px auto;
        .marginBottom{
            margin-bottom: 35px;
        }
    }
</style>
